<template>
	<u-popup :show="visible" round="16rpx" mode="bottom" closeOnClickOverlay @close="hide">
		<view class="bind-goods-popup" :style="{height:height}">
			<shop-list ref="Shop" class="shop-box" :class="{'shop-hide':showGoods}" @next="shopNext"
				@close="hide"></shop-list>
			<goods-list ref="Goods" class="goods-box" :class="{'goods-hide':!showGoods}" @back="goodsBack"
				@select="goodsSelect"></goods-list>
		</view>
	</u-popup>
</template>

<script>
	import ShopList from './shop-list.vue'
	import GoodsList from './goods-list.vue'

	export default {
		components: { ShopList, GoodsList },
		props: {
			height: {
				type: String,
				default: '60vh'
			}
		},
		data() {
			return {
				visible: false,
				showGoods: false,
			}
		},
		methods: {
			show() {
				this.visible = true
				this.showGoods = false
				this.$refs.Shop.init()
			},
			hide() {
				this.visible = false
			},
			shopNext(item) {
				this.showGoods = true
				this.$refs.Goods.init(item)
			},
			goodsBack() {
				this.showGoods = false
			},
			goodsSelect(e) {
				this.$emit('select', e)
				this.hide()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bind-goods-popup {
		position: relative;
		overflow: hidden;

		.shop-box,
		.goods-box {
			position: absolute;
			width: 100%;
			height: 100%;
			transition: transform .25s;
			transform: translateX(0%);
		}

		.shop-hide {
			transform: translateX(-100%);
		}

		.goods-hide {
			transform: translateX(100%);
		}
	}
</style>